/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <m-list-construction title="用户管理">
    <template slot="operation">
      <el-button
        type="primary"
        size="mini"
        @click="createInfo"
      >创建用户组</el-button>
      <!-- 创建用户组 -->
      <el-dialog
        :title="orgInfo ? '编辑用户组' : '创建用户组'"
        v-if="createUserGroupDialog"
        :visible.sync="createUserGroupDialog"
        width='auto'
        append-to-body
      >
        <m-create-user-group
          :item="item"
          @close="close"
        ></m-create-user-group>
      </el-dialog>
    </template>
    <template slot="content">
      <div class="m-page">
        <div class="left">
          <mGroup></mGroup>
        </div>
        <div class="right">
          <mOrgInfo @editGroup="editGroup"></mOrgInfo>
          <userManage></userManage>
        </div>
      </div>
    </template>
  </m-list-construction>
</template>
<script>
  import { mapGetters } from 'vuex'
  import mCreateUserGroup from './_source/createUserGroup.vue'
  import mGroup from './_source/group.vue'
  import mOrgInfo from './_source/orgInfo.vue'
  import mListConstruction from '@/module/components/listConstruction/listConstruction'
  import userManage from './_source/userManage.vue'
  export default {
    name: 'users-index',
    data () {
      return {
        createUserGroupDialog: false,
        item: null,
      }
    },
    computed: {
      ...mapGetters('user', [
        'currentGroup'
      ])
    },
    methods: {
      close () {
        this.createUserGroupDialog = false
        this.item = null
      },
      editGroup () {
        this.item = this.currentGroup
        this.createUserGroupDialog = true
      },
      createInfo () {
        this.item = null
        this.createUserGroupDialog = true
      }
    },
    components: { mListConstruction, mGroup, mOrgInfo, userManage, mCreateUserGroup }
  }
</script>
<style lang="scss" scoped>
.m-page {
  display: flex;
  background-color: #fff;
  height: calc(100vh - 150px);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
  .left {
    min-width: 220px;
    border-right: 2px solid #ebebeb;
    margin-right: 20px;
  }
  .right {
    width: calc(100% - 220px);
  }
}
</style>
